<template>
  <div class="container">
    <headerBar :title="local.salesOrder" :isNoReturn="true" @changeLan="changeLan"></headerBar>
    <div class="all" :style="{paddingTop: pdt+'px'}">
      <div class="page__bd" style>
        <div class="weui-search-bar">
          <div class="weui-search-bar__form">
            <div class="weui-search-bar__box">
              <input
                type="search"
                class="weui-search-bar__input"
                v-model="inputVal"
                placeholder="输入客户,库存单据编号查询"
                @confirm="inputTyping"
              />
              <div class="weui-icon-clear" v-if="inputVal.length > 0" @click="clearInput">
                <icon type="clear" size="14"></icon>
              </div>
              <span
                style=";position:absolute;right: 11px;bottom: 2px;"
                :hidden="!inputShowed"
                @click="hideInput"
              ></span>
            </div>
            <label class="weui-search-bar__label" :hidden="inputShowed" @click="showInput">
              <icon class="weui-icon-search" type="search" size="14"></icon>
              <div class="weui-search-bar__text">{{local.search}}</div>
            </label>
          </div>
          <div
            class="weui-search-bar__cancel-btn"
            :hidden="!inputShowed"
            @click="inputTyping"
          >{{local.search}}</div>
        </div>
      </div>
      <div class style>
        <div
          class
          style="display:flex;flex-direction: row;justify-content: space-between;align-content: center;padding: 28rpx 5rpx;"
        >
          <div class style="display:flex;flex-direction: row;">
            <div class="msg-status">
              <div class="a">{{local.screen}}：</div>
              <div
                class="a"
                :id="0"
                :class="[activeIndex == 0 ? 'msg_item_on' : '']"
                @click="tabClick(0)"
              >{{local.all}}</div>
              <div class="a">|</div>
              <div
                class="a"
                :id="1"
                :class="[activeIndex == 1 ? 'msg_item_on' : '']"
                @click="tabClick(1)"
              >{{local.notsubmitted}}</div>
              <div class="a">|</div>
              <div
                class="a"
                :id="2"
                :class="[activeIndex == 2 ? 'msg_item_on' : '']"
                @click="tabClick(2)"
              >{{local.submitted}}</div>
            </div>
          </div>
          <div class="filter-btn" @click="openDialogRight">{{local.screen}}</div>
        </div>
        <div>
          <div class="documentsList">
            <template v-if="saleList1.length == 0">
              <div class="stock-in-record nodata-wrap">
                <img src="/static/style/block.png" class="nodata-img" />
                <p class="nodata-txt">{{local.nodata}}</p>
              </div>
            </template>
            <div v-else class="stock-in-list">
              <div
                class="stock-in-record"
                @click="routerToUrl(`/packageA/pages/saleOrderDetail/index?id=${item.id}`)"
                v-for="(item, index) in saleList1"
                :key="index"
              >
                <div class="record-Number">
                  <div class="a">{{local.salesOrderNo}}：{{item.orderCode}}</div>
                </div>
                <div class="record-supplier">
                  <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_110'">{{local.customer}}：</span>
                  <div>{{item.customerName==null?local.blcok:item.customerName}} ({{item.customerCode}})</div>
                </div>
                <!-- <div class="record-warehouse">
                  <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_110'">{{local.warehouseIn}}：</span>
                  <div>
                    {{item.warehouseName==null?local.blcok:item.warehouseName}}
                  </div>
                </div>-->
                <div class="record-warehouse">
                  <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_110'">{{local.status}}：</span>
                  <div
                    :style="{color: item.submitType==0? '#FF7903': ''}"
                  >{{item.submitType=='0'?local.notsubmitted:local.submitted}}</div>
                </div>
                <div class="record-warehouse">
                  <span
                    :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_110'"
                  >{{local.logisticsOrderNo}}：</span>
                  <div>{{item.trackNumber==null||item.trackNumber=='null'?local.blcok:item.trackNumber}}</div>
                </div>
                <div class="record-warehouse">
                  <span
                    :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_110'"
                  >{{local.salesInvoiceNo}}：</span>
                  <div>{{item.saleOrderInvoice==null?local.blcok:item.saleOrderInvoice}}</div>
                </div>
                <div class="record-warehouse">
                  <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_110'">{{local.businessDate}}：</span>
                  <div>{{item.busDate==null?local.blcok:item.busDate}}</div>
                </div>
                <div class="record-warehouse">
                  <span :class="lang == 'zh'||lang =='zh_CN'?'w_80':'w_110'">{{local.remark}}：</span>
                  <div>{{item.remark==null?local.block:item.remark}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="modal" v-if="modalFlag" catchtouchmove="true">
          <div class="dialog">
            <div class="title">{{local.selectWarehouse}}</div>
            <textarea class="text" :placeholder="local.selectWarehouse+ ':'"></textarea>
            <div class="ware-item">
              <div class="ware-item-left">
                <div class="num">1</div>
                <div class="name">{{local.selectedWarehouse}}</div>
              </div>
              <i class="iconfont iconselect1"></i>
            </div>
            <div class="ware-item">
              <div class="ware-item-left">
                <div class="num">2</div>
                <div class="name">{{local.semiFinishedProductsWarehouse}}</div>
              </div>
              <i class="iconfont iconselect1"></i>
            </div>
            <div class="ware-item">
              <div class="ware-item-left">
                <div class="num">3</div>
                <div class="name">{{local.finishedProductWarehouse}}</div>
              </div>
              <i class="iconfont iconselect1"></i>
            </div>
            <div class="ware-item">
              <div class="ware-item-left">
                <div class="num">4</div>
                <div class="name">{{local.deliveryWarehouse}}</div>
              </div>
              <i class="iconfont iconselect1"></i>
            </div>
            <div class="confirm-btn" @click="closeDialog">{{local.confirm}}</div>
          </div>
        </div>
      </div>
      <div class="modalRight" v-if="modalFlagRight" catchtouchmove="true">
        <div style="width: 100%; height: 100%;" @click="modalFlagRight = false"></div>
        <div class="dialog">
          <div class="tip-name">{{local.salesOrderNo}}:</div>
          <input type="number" v-model="orderCode" />
          <div class="tip-name">{{local.selectCustomer}}:</div>
          <input @click="customerHandler()" v-model="mydata.name" />
          <div class="tip-name">{{local.selectTime}}:</div>
          <picker
            class="weui-btn flex"
            mode="date"
            :value="date"
            start="1999-01-01"
            end="2099-01-01"
            @change="DateChange"
          >
            <input v-model="startTimeFormat" disabled />
          </picker>
          <div class="tip-name">-</div>
          <picker
            class="weui-btn flex"
            mode="date"
            :value="date"
            start="1999-01-01"
            end="2099-01-01"
            @change="DateChangeEnd"
          >
            <input v-model="endTimeFormat" disabled />
          </picker>
          <div class="btn">
            <div class="cancel-btn" @click="closeDialogRight">{{local.cancel}}</div>
            <div class="confirm-btn" @click="searchBytip()">{{local.confirm}}</div>
          </div>
        </div>
      </div>
      <div class="bottom-bar">
        <div
          class="confirm"
          @click="routerToUrl('/packageA/pages/addSaleOrder/index')"
        >{{local.add}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import card from '@/components/card'
import home from '@/api/home'
import headerBar from '@/components/headerBar'
import { formatDate } from '@/utils/index'
import {filterParams} from '../../../utils'
export default {
  components: {
    card,
    headerBar
  },
  onShow(){
    this.initLang()
    this.initMyData()
  },
  onLoad () {
    this.initLang()
    var myDate = new Date()
    this.startTime = formatDate(myDate, 'YYYY-MM-DD')
    this.endTime = formatDate(myDate, 'YYYY-MM-DD')
    this.saleOrderListType1()
    this.pdt = this.globalData.CustomBar
  },
  computed: {
    startTimeFormat(){
      return this.startTime ? wx.$timeFormat(this.startTime) : '' // new Date(this.startTime).$format('dd/MM/yyyy') : ''
    },
    endTimeFormat(){
      return this.endTime ? wx.$timeFormat(this.endTime) : '' // new Date(this.endTime).$format('dd/MM/yyyy') : ''
    }
  },
  methods: {
    initLang(){
      this.local = wx.getStorageSync('local')
      this.lang = wx.getStorageSync('lang')
    },
    initMyData(){
      var pages = getCurrentPages();
      var currPage = pages[pages.length - 1]; //当前页面
      let myData = currPage.data.mydata;
      this.mydata.id = myData ? myData.id : ''
      this.mydata.name = myData ? myData.name : ''
    },
    customerHandler () {
      // 跳转到 客户列表
      wx.navigateTo({
        url: `../../pages/selectSupplier/index?name=customer` //与供应商选择列表共用
      })
    },
    resetParams(){
      this.orderCode = ''
      this.startTime = ''
      this.customerId = ''
      this.mydata.id = ''
      this.mydata.name = ''
      this.endTime = ''
      this.modalFlagRight = false
      this.modalFlag = false
      this.pageSize = 4
      this.pageNum = 1
      this.activeIndex = 0
    },
    changeLan (val, lang) {
      this.local = val
      this.lang = lang
    },
    async searchBytip () {
      wx.showLoading({title: this.local.loading})
      let flagParams = {
        orderCode: this.orderCode,
        customerId: this.mydata.id,
        'params[startTime]': this.startTime,
        'params[endTime]': this.endTime
      }
      let params = filterParams(flagParams)
      // 这里面是查询, 供应商选择需要跳转到新的客户选择
      home.saleOrderList(params).then(res => {
        wx.hideLoading()
        const { rows, code, msg } = res
        this.modalFlagRight = false
        if (code !== 0) {
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        this.saleList1 = rows
        this.modalFlagRight = false
      })
    },
    setType (type) {
      let submitType = {}
      switch (type) {
        case 0:
          submitType = {submitType: type}
          break
        case 1:
          submitType = {submitType: type}
          break
        default:
          submitType = {}
      }
      return submitType
    },
    async saleOrderListType1 (deliverType) {
      let submitType = this.setType(deliverType)
      wx.showLoading({
        title: `${this.local.loading}`,
        icon: 'none'
      })
      home.saleOrderList({...submitType, pageSize: this.pageSize, pageNum: this.pageNum}).then(res => {
        wx.hideLoading()
        const { rows, code, msg, total } = res
        this.modalFlagRight = false
        if (code !== 0) {
          wx.showToast({
            title: msg || 'error',
            icon: 'none',
            duration: 2000
          })
          return
        }
        if (this.pageNum == 1) {
          this.total1 = total
          this.saleList1 = rows // 0未提交1是已提交
        } else {
          this.saleList1 = this.saleList1.concat(rows)
        }
        this.saleList1.map(item => {
          item.busDate = wx.$timeFormat(item.busDate) //new Date(item.busDate).$format('dd/MM/yyyy')
        })
      })
    },
    tabClick (value) {
      this.activeIndex = value
      this.pageNum = 1
      this.pageSize = 4
      this.saleList1 = []
      if (this.activeIndex == 0) {
        this.saleOrderListType1()
      } else if (this.activeIndex == 1) {
        this.saleOrderListType1(0)
      } else {
        this.saleOrderListType1(1)
      }
    },
    inputTyping (e) {
      this.startTime = ''
      this.endTime = ''
      this.mydata.id = ''
      this.orderCode = this.inputVal
      this.searchBytip()
    },
    openDialog () {
      this.modalFlag = true
    },
    closeDialog () {
      this.modalFlag = false
    },
    routerToUrl (url) {
      wx.navigateTo({
        url
      })
    },
    showInput () {
      this.inputShowed = true
    },
    hideInput () {
      this.inputVal = ''
      this.inputShowed = false
    },
    clearInput () {
      this.inputVal = ''
    },
    openDialogRight () {
      this.modalFlagRight = true
    },
    closeDialogRight () {
      this.modalFlagRight = false
      this.resetParams()
      this.saleOrderList()
    },
    DateChange (e) {
      this.startTime = e.mp.detail.value
    },
    DateChangeEnd (e) {
      this.endTime = e.mp.detail.value
    }
  },
  data () {
    return {
      lang: wx.getStorageSync('lang'),
      mydata: {
        id: '',
        name: ''
      },
      pageSize: 4,
      pageNum: 1,
      total: 0,
      total2: 0,
      total3: 0,
      orderCode: '',
      startTime: '',
      endTime: '',
      modalFlagRight: false,
      pdt: 66,
      local: wx.getStorageSync('local'),
      saleList: [],
      saleList1: [],
      saleList2: [],
      saleList3: [],
      saleListStatus: [],
      saleListType: [],
      modalFlag: false,
      inputShowed: false,
      inputVal: '',
      time: '12:01',
      activeIndex: 0
    }
  },
  pageReturn () {
    this.resetParams()
  },
  async onReachBottom () {
    if (this.pageNum < parseInt((this.total1 + this.pageSize - 1) / this.pageSize)) { // 如果当前页面小于最后一页
      this.pageNum = this.pageNum + 1// 把当前页面，变成下一页面的页面数
      if (this.activeIndex == 0) {
        this.saleOrderListType1() // 进行对后台数据的请求
      } else if (this.activeIndex == 1) {
        this.saleOrderListType1(0) // 进行对后台数据的请求
      } else if (this.activeIndex == 2) {
        this.saleOrderListType1(1) // 进行对后台数据的请求
      }
    } else {
      wx.showToast({ // 如果当前页面处于最后一页，就提示没有数据了
        title: '没有更多了',
        icon: 'none',
        duration: 2000
      })
    }
  },
  // 下拉刷新
  async onPullDownRefresh () {
    this.pageNum = 1 // 只请求第一页面的列表数据
    this.saleOrderListType1() // 进行数据的请求
    wx.stopPullDownRefresh() // 停止下拉刷新
  },
  created () {
  }
}
</script>

<style scoped lang="scss">
@import 'index';
.log-list {
  display: flex;
  flex-direction: column;
  padding: 40rpx;
}

.log-item {
  margin: 10rpx;
}
</style>
